<template>
	<view class="content">
		<view class="ssq_xz" @click="isToast(toast)">
			<picker class="picker" @change="pickerArea" :value="pindex" :range="array" :disabled="flag" range-key="name" @click="getArea(provinceId,cityId,1)">
				<view class="uni-input" v-if="provinceText">{{provinceText}}</view>
				<view class="uni-input" v-if="!provinceText">省</view>
			</picker>
			<picker class="picker" @change="pickerArea" :value="pindex" :range="array" :disabled="provinceText == '' ||  provinceText == '全部'" range-key="name" @click="getArea(provinceId,cityId,2)">
				<view class="uni-input" v-if="cityText">{{cityText}}</view>
				<view class="uni-input" v-if="!cityText">市</view>
			</picker>
			<picker class="picker" @change="pickerArea" :value="pindex" :range="array" :disabled="cityText == '' ||  cityText == '全部'" range-key="name" @click="getArea(provinceId,cityId,3)">
				<view class="uni-input" v-if="districtText">{{districtText}}</view>
				<view class="uni-input" v-if="!districtText">区</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array:[],
				pindex: 0,
				provinceId:"", // 选择的id
				cityId:"", // 选择的id
				province:"", 	
				city:""	,
				district:"",
				provinceText:"",
				cityText:"",
				districtText:"",
				type:""
			};
		},
		props: {
			flag: {
				type: Boolean,
				default: false
			},
			toast: {
				type: String,
				default: ""
			},
			isAll: {
				type: Boolean,
				default: false
			},
		},
		methods: {
			// 完成选择
			pickerArea(e){
				let index = this.pindex = e.detail.value
				if(this.type == 1){
					this.province = this.provinceId =  this.array[index].value
					this.provinceText = this.array[index].name
				}
				if(this.type == 2){
					this.city =  this.cityId = this.array[index].value
					this.cityText = this.array[index].name
				}
				if(this.type == 3){
					this.district = this.array[index].value
					this.districtText = this.array[index].name
				}
				let parmas = {
					province:this.province,
					city:this.city,
					district:this.district
				}
				this.$emit("onChange",parmas)
			},
			// 选择地区
			getArea(provinceId,cityId,e){
				this.pindex = 0
				if(e == 1){
					provinceId = ""
					cityId = ""
					this.cityId = ""
					this.provinceId = ""
					this.city = ""
					this.cityText = ""
					this.district = ""
					this.districtText = ""
				}
				if(e == 2){
					this.district = ""
					this.districtText = ""
					cityId = ""
				}
				this.type = e
				let params = {
					province:provinceId,
					city:cityId
				}
				this.$api.getArea(params).then(res => {
					const {code,data,msg,time} = res.data
					if(code === 1){
						this.array = []
						data.forEach((el)=>{
							this.array.push(el)
						})
						// 添加一个全部的分类
						if(this.isAll){
							this.array.unshift({
								name:"全部",
								value:''
							})
						}
						
					}else{
						this.$toast(msg) 
					}
	                }).catch((err) => {
				}).finally((e) => {
				}) 
			},
			// 提示
			isToast(e){
				if(e){
					this.$toast(e)
				}
			}
		},
	}
</script>

<style>
	.ssq_xz .uni-input{
		font-size: 26rpx;
		line-height: 60rpx;
		background: #fff url(/static/xl_sj.png) no-repeat right 15rpx center;
		background-size: 32rpx 19rpx;
		border-radius: 10rpx;
		border: 1rpx solid #ccc;
		padding-right: 60rpx;
		padding-left: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: right;	
	}
	.ssq_xz{ 
		padding:  0 30rpx;
		height: 120rpx;
		background: #f5f7fa;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ssq_xz .picker{
		width: 217rpx;
		height: 60rpx;
	}
</style>
